<template>
  <div class="moblie-base-page">
    <!-- 头部 -->
    <div class="header-flex">
      <je-toolbar>
        <je-button
          type="text"
          class="clean-right-border"
          :loading="loading"
          icon="fal fa-save"
          @click="operateButton()"
        >
          保存
        </je-button>
        <je-button
          type="text"
          class="clean-right-border"
          @click="clickJs('grid', 'FUNCINFO_GRIDJSLISTENER')"
        >
          <i
            class="fas fa-bolt"
            :style="`color:${
              changeJsListener(funcStore.funcBean.FUNCINFO_GRIDJSLISTENER) ? '#F4CE4A' : '#8d98ab'
            }`"
          ></i>
          列表JS事件
        </je-button>
        <je-button
          type="text"
          class="clean-right-border"
          @click="clickJs('form', 'FUNCINFO_FORMJSLISTENER')"
        >
          <i
            class="fas fa-bolt"
            :style="`color:${
              changeJsListener(funcStore.funcBean.FUNCINFO_FORMJSLISTENER) ? '#F4CE4A' : '#8d98ab'
            }`"
          ></i>
          表单JS事件
        </je-button>
      </je-toolbar>
    </div>
    <div class="function-content">
      <je-form
        :model="formState"
        class="function-form-container"
        label-align="right"
        :colon="false"
        :label-col="{ style: { width: '200px' } }"
        autocomplete="off"
      >
        <je-row type="flex">
          <je-col
            v-for="(childItem, colIndex) in MOBLIDE_CONFIG"
            :id="`col${colIndex}`"
            :key="`col${colIndex}`"
            :span="childItem.layout == 'flex' ? 11 : 22"
          >
            <je-form-item
              :key="childItem.value"
              :name="childItem.value"
              v-bind="childItem.require ? validateInfos[childItem.value] : ''"
              validate-type="tooltip"
              :label="childItem.label"
            >
              <je-form-item-rest>
                <div v-if="childItem.type == 'input'">
                  <je-input
                    v-model:value="formState[childItem.value]"
                    :placeholder="childItem.placeholder"
                    :disabled="childItem.disabled"
                    :max-length="40"
                    allow-clear
                  >
                  </je-input>
                </div>

                <div v-if="childItem.type == 'select'">
                  <je-select
                    v-if="childItem.configInfo"
                    v-model:value="formState[childItem.value]"
                    :config-info="childItem.configInfo"
                    :get-popup-container="getPopupContainer"
                  ></je-select>
                  <je-select
                    v-if="!childItem.configInfo"
                    v-model:value="formState[childItem.value]"
                    :options="childItem.selectData"
                    :get-popup-container="getPopupContainer"
                  ></je-select>
                </div>
                <div v-if="childItem.type == 'switch'">
                  <je-switch v-model:value="formState[childItem.value]" />
                  <i style="margin-left: 5px; color: #3265f5">{{ childItem.describe }}</i>
                </div>
                <div v-if="childItem.type == 'inputNumber'">
                  <je-input-number
                    v-model:value="formState[childItem.value]"
                    :min="1"
                    style="width: 100%"
                  >
                    <template #addonAfter>
                      {{ childItem.suffix }}
                    </template>
                  </je-input-number>
                </div>
                <div v-if="childItem.type == 'qrcode'">
                  <je-qrcode class="qr-code" :value="qrcodeValue()" :size="childItem.size" />
                </div>
              </je-form-item-rest>
            </je-form-item>
          </je-col>
        </je-row>
      </je-form>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
  import { ref, defineComponent, onMounted, reactive } from 'vue';
  import { baseConfigSave } from '@/api/index';
  import { MOBLIDE_CONFIG } from '@/helper/constant';
  import { useGlobalStore } from '@common/store/global-store';
  import { getAxiosBaseURL } from '@jecloud/utils';
  import {
    Row,
    Col,
    Switch,
    Form,
    Modal,
    InputNumber,
    Select,
    Button,
    Input,
    Toolbar,
  } from '@jecloud/ui';

  const useForm = Form.useForm;
  import { useFuncStore } from '@/store/func-store';
  import { listenerEditorModal } from '@/helper/index.js';

  export default defineComponent({
    name: 'Function',
    components: {
      JeButton: Button,
      JeRow: Row,
      JeCol: Col,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInput: Input,
      JeInputNumber: InputNumber,
      JeSelect: Select,
      JeSwitch: Switch,
      JeToolbar: Toolbar,
    },
    props: {
      recordData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      origin: String,
    },
    emits: ['changeModal'],
    setup(props) {
      const funcStore = useFuncStore();
      const productId = ref(funcStore.product.id);
      let formState = ref(funcStore.funcBean);

      const loading = ref(false);

      // 表单校验必填项
      const rulesRef = reactive({
        FUNCINFO_APPFORM_LABEL_WIDTH: [
          {
            required: true,
            message: '该输入项为必填项',
          },
        ],
      });
      const { validateInfos, validate } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });
      const methods = {
        // 扫码预览
        qrcodeValue() {
          const { token } = useGlobalStore();
          const previewUrl = getAxiosBaseURL() || window.location.origin;
          return `${previewUrl}/app/micro/func/#/pages/func/data/${props.recordData.code}?authorization=${token}`;
        },
        changeJsListener(data) {
          const parseData = data ? JSON.parse(data) : [];
          let eventType = false;
          parseData.forEach((item) => {
            if (item.fire == '1') {
              eventType = true;
            }
          });
          return eventType;
        },
        // 点击表单或者列表js事件
        clickJs(type, key) {
          listenerEditorModal({
            funcId: props.recordData.id,
            funcCode: props.recordData.code,
            funcName: props.recordData.text,
            eventType: type,
            origin: props.origin,
            title: `${type == 'form' ? '表单' : '列表'}JS事件`,
            callback: (obj) => {
              formState.value[key] = obj.data;
              funcStore.funcBean[key] = obj.data;
            },
          });
        },
        getPopupContainer() {
          return document.body;
        },
        // 点击按钮
        operateButton() {
          loading.value = true;
          validate()
            .then(() => {
              baseConfigSave(formState.value)
                .then((res) => {
                  // VueEvent.emit('refleshTreeData');
                  loading.value = false;
                  Modal.message(res.message, 'success');
                })
                .catch((err) => {
                  Modal.alert(err.message, 'error');
                  loading.value = false;
                  console.log('error', err);
                });
            })
            .catch((err) => {
              loading.value = false;
              console.log('error', err);
            });
        },
      };

      onMounted(() => {});

      return {
        productId,
        formState,
        ...methods,
        validateInfos,
        rulesRef,
        loading,
        MOBLIDE_CONFIG,
        funcStore,
      };
    },
  });
</script>
<style lang="less">
  .tip-item {
    display: flex;
    vertical-align: middle;
    padding: 10px;
    .item-right {
      vertical-align: middle;
    }
    .img {
      width: 80px;
      height: 60px;
      vertical-align: middle;
      margin-right: 20px;
    }
  }
  .mobile-list-config-container {
    .je-modal--content {
      white-space: inherit !important;
    }
  }
  .moblie-base-page {
    .ant-col-22 {
      .ant-form-item-control {
        width: calc(100% - 200px) !important;
      }
    }
    .je-form-item.ant-form-item-with-help {
      margin-bottom: 20px !important;
    }
    .clean-right-border:hover {
      background: #d9d9d9 !important;
      border-radius: 2px !important;
    }
    .ant-form-item-label {
      > label {
        display: inline-block !important;
        line-height: 32px;
      }
    }
    .header-flex {
      > .ant-btn {
        padding: 0px 12px !important;
        height: 32px !important;
        line-height: 32px !important;
        // border-radius: 0 !important;
      }
    }

    .ant-input-number {
      width: 100%;
    }
    .fa-plus-style {
      font-size: 16px;
      cursor: pointer;
      background: #8cbc5f;
      color: #fff;
      padding: 8px 10px;
      border-radius: 2px;
    }
    .fal-background {
      background: #f59b22 !important;
      padding: 5px 8px !important;
      color: #fff;
    }
  }
</style>
<style lang="less" scoped>
  .moblie-base-page {
    display: flex;
    flex-direction: column;
    .header-flex {
      flex: none;
      display: flex;
      justify-content: space-between;
      background: #f7f9fc;
      height: 40px;
      line-height: 40px;
      padding-left: 4px;
      // border-top: 1px solid #f0f0f0;
      border-bottom: 1px solid #f0f0f0;

      .button-pointer {
        cursor: pointer;
      }
      .add-margin {
        margin-left: 8px;
      }
      .button-color {
        color: #3265f5;
      }
    }
    .function-content {
      flex: auto;
      padding: 20px 40px 45px;
      overflow: auto;
      .title {
        font-size: 18px;
        color: #3265f5;
        padding: 10px 0 10px 40px;
      }
    }
  }
</style>
